<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>

		<link rel="stylesheet" type="text/css" th:href="@{/smartParking/css/login.css}" />

		<link rel="stylesheet" type="text/css" th:href="@{/smartParking/layui/css/layui.css}" />
		
		<script type="text/javascript"  th:src="@{/smartParking/js/jquery.min.js}"></script>

		<script type="text/javascript" th:src="@{/smartParking/layui/layui.js}"></script>

		<script type="text/javascript" th:src="@{/smartParking/js/jquery-3.5.1.min.js}"></script>

		<!--数据格式化为json字符串-->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery.serializeJSON/3.1.1/jquery.serializejson.js"></script>
	</head>
	<body>
	<div id="base">
		<!-- 背景 -->
		<div id="bg">
			<div id="bg_img"></div>
		</div>

		<!-- 登录面板 -->
		<div id="login">
			<div id="login_bg">
				<!-- Unnamed (矩形) -->
				<div id="login_box1">
					<div id="box1_text">
						<p><span style="text-decoration:none;">智能停车场管理系统</span></p>
					</div>
				</div>
				<!-- 登录按纽 (矩形) -->
				<div id="login_box2_1" class="login_box2">
					<div class="box2_div" ></div>
					<div class="box2_text" >
						<p><span style="text-decoration:none;" id="btn_login">登录</span></p>
					</div>
				</div>

				<!-- 注册按纽 (矩形) -->
				<div id="login_box2_2" class="login_box2">
					<div class="box2_div" ></div>
					<div class="box2_text" >
						<p><span style="text-decoration:none;">注册</span></p>
					</div>
				</div>
			</div>

			<!-- Unnamed (SVG) -->
			<div id="login_box3">
				<img id="box3_img" class="img " th:src="@{/smartParking/img/u25.svg}"/>
			</div>

			<!-- 输入框 (组 合) -->
			<div id="login_box4" >

				<!-- 边框 (矩形) -->
				<div id="box4_1" data-label="边框">
					<div id="box4_1_div"></div>
					<div id="box4_1_text" style="display:none; visibility: hidden">
						<p></p>
					</div>
				</div>

				<!-- 输入框 (文本框) -->
				<div class="box4_2" data-label="输入框">
					<input class="box4_2_input" id="box4_2_input" type="text" value=""  maxlength="20" placeholder="请输入用户名"/>
				</div>

				<!-- 清除 (矩形) -->
				<div id="box4_3" data-label="清除" style="display:none; visibility: hidden">
					<div id="box4_3_text" >
						<p><span style="text-decoration:none;"></span></p>
					</div>
				</div>

				<!-- 图标 (矩形) -->
				<div id="box4_4" class="ax_default box_1" data-label="图标">
					<div id="box4_4_div" ></div>
					<div id="box4_4_text" >
						<p><span style="text-decoration:none;"></span></p>
					</div>
				</div>
			</div>




			<!-- 输入框 (组 合) -->
			<div id="login_box5" >

				<!-- 边框 (矩形) -->
				<div id="box5_1" data-label="边框">
					<div id="box5_1_div"></div>
					<div id="box5_1_text" style="display:none; visibility: hidden">
						<p></p>
					</div>
				</div>

				<!-- 输入框 (文本框) -->
				<div class="box5_2" data-label="输入框">
					<input class="box5_2_input" id="box5_2_input" type="password" value=""  maxlength="20" placeholder="请输入密码"/>
				</div>

				<!-- 清除 (矩形) -->
				<div id="box5_3" data-label="清除" style="display:none; visibility: hidden">
					<div id="box5_3_text" >
						<p><span style="text-decoration:none;"></span></p>
					</div>
				</div>

				<!-- 图标 (矩形) -->
				<div id="box5_4" class="ax_default box_1" data-label="图标">
					<div id="box5_4_div" ></div>
					<div id="box5_4_text" >
						<p><span style="text-decoration:none;"></span></p>
					</div>
				</div>
			</div>

		</div>
	</div>


	<script type="text/javascript">
		$("#btn_login").click(function(){
			//获取后台的路径
			var path='[[${session.appPath}]]';

			layui.use('layer', function(){
				var layer = layui.layer;

				//页面层
				layer.open({
					type: 2,//iframe层
					title:"用户验证",
					resize:false,//不允许拉伸
					skin: 'layui-layer-rim', //皮肤
					area: ['370px', '390px'], //宽高
					shade: 0.6,//遮罩透明度
					move: false,//禁止拖拽
					closeBtn :0,//隐藏弹出层的关闭按钮
					scrollbar: false,//不允许浏览器滚动
					id: 'layui_check',//设定一个id，防止重复弹出
					maxmin: false,//允许全屏最小化
					anim: 5,//设置动画
					shadeClose : false,
					content: path+"/toSlider",
				});
			});
		})
	</script>
	</body>
</html>
